<template>
  <el-container>
    <el-header>
      <Menu></Menu>
    </el-header>
    <el-main>
  <div style="margin-left:13%;margin-right:13%;height:auto;">
    <el-container>
      <el-main style="height:1000px;width:55%;text-align:left;margin-top:20px">
        <span style="font-size:25px;font-weight:bold">为什么？？？</span>
        <br />
        <br />
        <br />
        <span style="font-size:12px;">
          <el-tag type="success">提问者</el-tag>
          <span style="color:#78B2F5;margin-left:8px">蔡蕴琦</span>
          <span style="margin-left:50px;color:#858585;font-size:15px;">发布于 2020.2.18 15:33</span>
          <span style="color:#858585;font-size:15px;">
            <i class="el-icon-view"></i>
            2200
          </span>
        </span>
        <br />
        <el-divider content-position="left">
          <span style="font-size:18px;font-weight:bold;color:#7A929C">10个回答</span>
        </el-divider>
        <el-button type="primary" slot="reference" icon="el-icon-edit" circle></el-button>

        <div>
          <div style="text-align:right">
            <br />
            <div style="text-align:left">
              <div style="display:inline">
                <el-avatar :size="40" :src="circle"></el-avatar>
                <span style="margin-left:3px;font-size:12px;color:#33335C;font-weight:bold;">蔡蕴琦</span>
              </div>
              <div class="demo-basic--circle" style=";height:150px">
                <div class="block" style="display:block">
                  <div style="margin-top:10px">
                    <div :class="showTotal?'total-introduce':'detailed-introduce'">
                      <div class="intro-content" :title="introduce" ref="desc">
                        <span
                          class="merchant-desc"
                          v-if="introduce"
                          style="word-break:normal; 
                                width:auto; 
                                display:block; 
                                white-space:pre-wrap;
                                word-wrap : break-word ;
                                overflow: hidden ;
                                font-size:17px"
                        >{{introduce}}</span>
                        <div class="unfold" @click="showTotalInfo" v-if="showExchangeButton">
                          <p>{{exchangeButton?'展开':'收起'}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div style="margin-top:20px;margin-left:10px" >
                  <el-tag  class="point" type="success" effect="plain" style="text-align:left" @click="thumbup">
                    <Icon type="ios-heart-outline" style="margin-left:0px;margin-right:4px"></Icon>赞
                    <span style="margin-left:2px">{{count}}</span>
                  </el-tag>
                  <el-button type="danger" style="margin-left:10px" size="small" plain>举报</el-button>
                </div>

                <div style="text-align:right">
                  <span style="font-size:12px;color:#858585">发布于：2020.2.18</span>

                  <el-divider></el-divider>
                </div>
              </div>
            </div>
          </div>

          <div style="height:200px;">
           
          </div>
           
        </div>
      </el-main>
      
      <el-main style="border-left:solid 1px #ddd;height:1000px;margin-top:50px;margin-left:30px;">
        
        <div style="margin-top:20px">
          <div style="margin-top:20px;text-align:left">
            <span style="font-size:20px;font-weight:bold;">
             <img src="../assets/火焰.png" alt="" style="width:20px;height:20px">
            热门问题
           <li>内容</li>
          <li>内容</li>
          </span>
         
          
          
          </div>
          
        </div>

        <div style="border-top:0.5px solid #ddd;margin-top:20px">
          <div style="margin-top:20px;text-align:left">
            <span style="font-size:20px;font-weight:bold;">
            <img src="../assets/branch.png" alt="" style="width:20px;height:20px">
            相关问题
          </span>
          </div>
          
        </div>
      </el-main>
    </el-container>
  </div>
    </el-main>
  </el-container>
</template>

<script>
import Menu from '../components/Menu.vue'


export default {
  components:{
    Menu
  },
  data() {
    return {
      circle:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      count: 1,
      title: "演示展开收起",
      introduce: "",
      showTotal: true,
      exchangeButton: true,
      showExchangeButton: false,
      rem: "",
      thumbcontrol:0,
      x :new Array(100),
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    introduce: function() {
      this.$nextTick(
        function() {
          console.log("nextTick");
          let rem = parseFloat(this.getRem());
          if (!this.$refs.desc) {
            console.log("desc null");
            return;
          }
          let descHeight = window
            .getComputedStyle(this.$refs.desc)
            .height.replace("px", "");
          console.log("descHeight:" + descHeight);
          if (descHeight > 5.25 * rem) {
            console.log("超过了四行");
            this.showExchangeButton = true;
            this.exchangeButton = true;
            this.showTotal = false;
          } else {
            this.showExchangeButton = false;
            this.showTotal = true;
          }
        }.bind(this)
      );
    }
  },
  methods: {
    init() {
      this.introduce =
        "院士是某些国家所设立的科学技术方面的最高学术称号，一般为终身荣誉。在中国，院士通常是指中国科学院院士或中国工程院院士。2013年11月15日公布的《中共中央关于全面深化改革若干重大问题的决定》中，明确要求改革院士遴选和管理体制，优化学科布局，提高中青年人才比例，实行院士退休和退出制度。2017年中国科学院院士增选结果于2017年11月28日揭晓 [1]  ，共有61人新当选为中国科学院院士。其中，数学物理学部11人，化学部9人，生命科学和医学学部13人，地学部10人，信息技术科学部6人，技术科学部12人。";
    },
    showTotalInfo() {
      this.showTotal = !this.showTotal;
      this.exchangeButton = !this.exchangeButton;
    },
    getRem() {
      console.log("getRem");
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      let rem = ((winWidth * 0.3) / 375) * defaultRem;
      return rem;
    },
    // thumbup(){
    //   if(this.thumbcontrol===0)
    //   {
    //      this.thumbcontrol=1;
    //      document.getElementById('thumbupbutton').style.backgroundColor='black';
    //      document.getElementById('thumbupbutton').style.color='#ffffff';
    //      console.log(document.getElementById('thumbupbutton'))
    //      this.count++;
    //   }
    // }
  }
};
</script>

<style lang='less'>
.point {
  font-size: 16px;
}

.point:hover {
  cursor: pointer !important;
  background-color: #02975f !important;
  color: #ffffff !important;
}

.point:active{
  cursor: pointer !important;
  background-color: #02975f !important;
  color: #ffffff !important;
}



.total-introduce {
  height: auto;
  overflow: hidden;
  font-size: 17px;
  color: #434343;
  margin: 10px;
  .intro-content {
    .merchant-desc {
      width: 100%;
      line-height: 21px;
    }
  }

  .unfold {
    display: block;
    z-index: 11;
    float: right;
    width: 40px;
    height: 21px;
    p {
      margin: 0;
      line-height: 21px;
      color: #7fbe87;
      cursor: pointer;
    }
  }
}

.detailed-introduce {
  font-size: 17px;
  color: #434343;
  position: relative;
  overflow: hidden;
  margin: 10px;
  .intro-content {
    max-height: 84px;
    line-height: 21px;
    word-wrap: break-word;
    background-color: #ffffff;
    color: #ffffff;
    overflow: hidden;
    .merchant-desc {
      width: 100%;
      line-height: 21px;
    }
    &:after,
    &:before {
      content: attr(title);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      color: #434343;
    }
    &:before {
      display: block;
      overflow: hidden;
      z-index: 1;
      max-height: 63px;
      background-color: #fff;
    }
    &:after {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 81px;
      -webkit-line-clamp: 4;
      text-overflow: ellipsis;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-indent: -12em;
      padding-right: 4em;
    }
    .unfold {
      z-index: 11;
      widows: 40px;
      height: 21px;
      outline: 0;
      position: absolute;
      right: 0;
      bottom: 0;
      p {
        margin: 0;
        line-height: 21px;
        color: #7fbe87;
        cursor: pointer;
      }
    }
  }
}


li{
  margin-left:20px
}
</style>